<template>
	<view class="total">
		<view class="head">
			<span style="font-size: 40rpx;font-weight: bold;">已完成</span>
			<span style="font-size: 50rpx;font-weight: bolder;">{{order_list[0].order_id}}</span>
			<span style="color: darkgray;">取单号</span>
		</view>
		
		<view class="middle1">
			<view style="width: 100%;display: flex;justify-content: space-between;">
				<span style="font-size: 40rpx;font-weight: bold;">{{order_list[0].shop_name}}</span>
				<view style="width: 200rpx;display: flex;justify-content: space-around;">
					<view style="background-color: #d0d0d0;height: 70rpx;width: 70rpx;border-radius: 100rpx;align-items: center;justify-content: center;display: flex;"><image src="../../../../static/一键呼叫.png" style="height: 50rpx;width: 50rpx;"></image></view>
					<view style="background-color: #d0d0d0;height: 70rpx;width: 70rpx;border-radius: 100rpx;align-items: center;justify-content: center;display: flex;"><image src="../../../../static/导航.png" style="height: 40rpx;width: 40rpx;"></image></view>
				</view>
			</view>
			<hr style="width: 600rpx;height: 1rpx;background-color: darkgrey;margin-top: 15rpx;">
			<view style="display: flex;flex-direction: column;justify-content: space-around;">
				<view style="display: flex;align-items: center;margin-top: 30rpx;">
					<image src="../../../../static/ashui.png" style="height: 70rpx;width: 70rpx;border-radius: 100rpx;"></image>
					<span style="color: #959595;font-size: 40rpx;margin-left: 30rpx;">{{user_name}}</span>
				</view>
				
				<view v-for="(item,index) in order_list">
					<view style="display: flex;width: 100%;height: 200rpx;margin-top: 30rpx;">
						<image :src="item.image_name" style="width: 200rpx;height: 120rpx;"></image>
						
						<view style="height: 100rpx;width: 500rpx;display: flex;flex-direction: column;">
							<view style="width: 480rpx;display: flex;justify-content: space-between;">
								<span style="color: black;font-size: 35rpx;font-weight: bold;">{{item.name}}</span>
								<span style="color: green;font-size: 35rpx;font-weight: bold;">￥{{item.price}}</span>
							</view>
							<span style="font-size: 30rpx;color: darkgray">{{item.detail}}</span>
							<span style="font-size: 30rpx;color: green;">×{{item.num}}</span>
						</view>
					</view>
				</view>
				
				
			</view>
			<hr style="width: 600rpx;height: 1rpx;background-color: darkgrey;">
			<view style="display: flex;justify-content: flex-end;margin-top: 20rpx;">
				<span style="font-size: 36rpx;">合计：</span>
				<span style="font-size: 42rpx;font-weight: bold;">￥{{total_price}}</span>
			</view>
		</view>
		<view class="middle2">
			 <span style="font-weight: bold;font-size: 40rpx;">门店信息</span>
			 <hr style="width: 600rpx;height: 1rpx;background-color: darkgrey;">
			 <view style="display: flex;justify-content: space-between;">
				 <span style="color: darkgray;font-size: 30rpx;">门店名称</span>
				 <span  style="font-size: 30rpx;">{{order_list[0].shop_name}}</span>
			 </view>
			 <view style="display: flex;justify-content: space-between;">
			 	<span style="color: darkgray;font-size: 30rpx;">门店地址</span>
			 	<span  style="font-size: 30rpx;">{{order_list[0].shop_addr}}</span>
			 </view>
			 <view style="display: flex;justify-content: space-between;">
			 	<span style="color: darkgray;font-size: 30rpx;">联系电话</span>
			 	<span  style="font-size: 30rpx;">{{shop_call}}</span>
			 </view>
		</view>
		<view class="middle3">
			<span style="font-weight: bold;font-size: 40rpx;">用餐信息</span>
			<hr style="width: 600rpx;height: 1rpx;background-color: darkgrey;">
			<view style="display: flex;justify-content: space-between;">
				<span style="color: gray">用餐方式</span>
				<span>{{order_list[0].eat_method}}</span>
			</view>
		</view>
		<view class="nav">
			<view class="item" @click="skipToShouye()">
				<image src="../../../../static/首页.png" class="pic" style="margin-left: 18rpx;"></image>
				<span class="word">首页</span>
			</view>
			<view class="item" @click="skipToBuy()">
				<image src="../../../../static/点单.png" class="pic"></image>
				<span class="word">点单</span>
			</view>
			<view class="item" @click="skipToMyOrder()">
				<image src="../../../../static/订单.png" class="pic"></image>
				<span class="word">订单</span>
			</view>
			<view class="item" @click="skipToMine()">
				<image src="../../../../static/我的.png" class="pic"></image>
				<span class="word">我的</span>
			</view>
			
		</view>
	</view>
	
</template>

<script>
	import nav from "../../navv/nav.js"
	export default {
		data() {
			return {
				
				user_name:this.$store.getters.nickName,
				total_price:0,
				shop_call:123456,
				order_list:[]
			}
		},
		methods: {
			...nav
		},
		mounted() {
			let t=this
			uni.request({
				url:"http://localhost:3000/getOrder",
				success(data) {
					t.order_list=data.data
					console.log("order" , data.data)
					let total_price=0;
					for(let i=0;i<data.data.length;i++){
						let temp=data.data;
						total_price+=temp[i].price*temp[i].num;
					}
					t.total_price=total_price;
					uni.request({
						url:"http://localhost:3000/insertCurrentOrder",
						method:"POST",
						dataType:"application/json",
						data:JSON.stringify(t.order_list),
						success(data) {
							console.log(666666666666666,t.order_list)
						}	
						
					});
				}
			});
			
		},
		onHide(){
			let t=this
			uni.request({
				url:"http://localhost:3000/delOrder",
				success(data) {
					console.log(" ")
				}
				
			})
			
		},
		
	}
</script>

<style scoped>
.total{
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #f1f1f1;
		justify-content: space-around;
		overflow: scroll;
		
	}
	.head{
		height: 300rpx;
		width: 620rpx;
		background-color: white;
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		padding: 30rpx;
		margin-top: 30rpx;

	}
	.middle1{
		
		width: 620rpx;
		background-color: white;
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		margin-top: 30rpx;
		padding: 30rpx;
	
	}
	.middle2{
		height: 500rpx;
		width: 620rpx;
		background-color: white;
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		margin-top: 30rpx;
		padding: 30rpx;
	
	}
	.middle3{
		height: 300rpx;
		width: 620rpx;
		background-color: white;
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		margin-top: 30rpx;
		padding: 30rpx;
		margin-bottom: 160rpx;
	
	}
	.nav{
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			width: 750rpx;
			height: 120rpx;
			border-top: 2rpx;
			border-style: solid;
			border-width: 2rpx;
			border-color: #d0d0d0;
			position: fixed;
			background-color: white;
			bottom: 0rpx;
		}
		.word{
			font-size: 25rpx;
		}
		.item{
			display: flex;
			flex-direction: column;
			align-items: center;
			align-content: center;
			width: 65rpx;
			height:95rpx;
			padding: 5rpx;
		}
		.pic{
			width: 60rpx;
			height: 80rpx;
		}
</style>
